<template>
  <el-dialog title="组员信息编辑" :visible.sync="dialog_visible">
      <div class="form-padding">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="temp"
      label-position="right"
      auto-complete="on"
      label-width="90px"
      style="width: 100%;"
    >
      <el-form-item label="序号" prop="id">
        <el-input disabled v-model="temp.id" />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input placeholder="请输入姓名" v-model="temp.name" />
      </el-form-item>
      <el-form-item label="所在部门" prop="department">
        <department-select
          v-model="temp.department"
          style="width: 100%;"
          @change="departmentChange"
        >
        </department-select>
      </el-form-item>
      <el-form-item label="所在小组" prop="group">
        <group-select
          v-model="temp.group"
            style="width: 100%;"
          :department.sync="temp.department"
          @change="groupChange"
        >
        </group-select>
      </el-form-item>
      <el-form-item label="职务" prop="jurisdiction">
        <post-select
          v-model="temp.jurisdiction"
          style="width: 100%;"
          @change="postChange"
        >
        </post-select>
      </el-form-item>
      <el-form-item label="上司编号" prop="pid">
        <boss-select
          v-model="temp.pid"
          style="width: 100%;"
          @change="pidChange"
        >
        </boss-select>
      </el-form-item>
      <el-form-item label="名下设备" prop="equipment">
        <device-select
          v-model="temp.equipment"
           style="width: 100%;"
          @change="equipmentChange"
        >
        </device-select>
      </el-form-item>
      <el-form-item label="绑定账号" prop="bind_account">
          <el-tooltip
              class="item"
              effect="dark"
              content="创建组员后，再去组员管理界面绑定"
              placement="top-start"            >
              <el-input disabled placeholder="" v-model="temp.bind_account" />
              
            </el-tooltip>
      </el-form-item>
      <el-form-item label="创建时间" prop="create_time">
        <el-date-picker
          disabled
           style="width: 100%;"
          v-model="temp.create_time"
          type="datetime"
          placeholder=""
        />
      </el-form-item>
    </el-form>
       </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  update,
} from "@/api/org_team_members";
import postSelect from "@/components/power/postSelect";
import bossSelect from "@/components/power/bossSelect";
import departmentSelect from "@/components/power/departmentSelect";
import groupSelect from "@/components/power/groupSelect";
import deviceSelect from "@/components/power/deviceSelect";

export default {
  name: "team_membersEdit",
  components: {
    "post-select": postSelect,
    "boss-select": bossSelect,
    "department-select": departmentSelect,
    "group-select": groupSelect,
    "device-select": deviceSelect,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    const validater_name = (rule, value, callback) => {
      if (value.length > 30) {
        callback(new Error("名称不能太长！"));
      } else {
        callback();
      }
    };
    return {     
      temp: {
        id: "",
        name: "",
        department: "",
        group: "",
        jurisdiction: "",
        pid: "",
        equipment: "",
        bind_account: "",
        create_time: "",
      },
      rules: {
        name: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
          { required: true, trigger: "blur", validator: validater_name },
        ],
      },
    };
  },
  computed: {
    dialog_visible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
  watch: {
    data: {
      handler(newValue, oldValue) {
        this.temp = Object.assign({}, this.data);
        // 当 watchedObject 或其内部属性变化时，这个函数被调用
      },
      deep: true,
    },
  },
  created() {
    this.initCtl();
  },
  methods: {
    initCtl() {
      this.temp = Object.assign(
        {},
        {
          id: "",
          name: "",
          department: "",
          group: "",
          jurisdiction: "",
          pid: "",
          equipment: "",
          bind_account: "",
          create_time: "",
        }
      );     
    },   
    cancel() {
      this.dialog_visible = false;
    },
    postChange(v) {
      this.temp.jurisdiction = v;
    },
    pidChange(v) {
      this.temp.pid = v;
    },
    departmentChange(v) {
      this.temp.department = v;
    },
    groupChange(v) {
      this.temp.group = v;
    },
    equipmentChange(v) {
      this.temp.equipment = v;
    },
    submit() {
      console.log(this.temp);
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          const param = {
            id: this.temp.id,
            name: this.temp.name,
            department: this.temp.department,
            group: this.temp.group,
            jurisdiction: this.temp.jurisdiction,
            pid: this.temp.pid,
            equipment: this.temp.equipment,
            bind_account: this.temp.bind_account,
          };
          update(param).then((response) => {
            if (response.data > 0) {
              setTimeout(() => {
                this.dialog_visible = false;
                this.$message({
                  type: "success",
                  message: "组员信息修改成功!",
                });
                this.$emit("success", param);
              }, 200);
            } else {
              this.$message({
                type: "info",
                message: "组员信息修改失败",
              });
            }
          });
        }
      });
    },
  },
};
</script>